<template><!--调查问卷-->
    <div class="warp-2" style="height:100%;">
            <navbar :title="$t('find_survey')"></navbar>
            <div class="box-tab-01 paddingLR15 white-bg bottom-shadow" style="margin-top: 56px;">
                <ul class="clearfix">
                    <li class="color666" @click="listSwitch(0)" :class="{'cur': index == 0}">{{ $t("doing") }}</li><!--待回答-->
                    <li class="color666" @click="listSwitch(1)" :class="{'cur': index == 1}">{{ $t("cos_time_stop") }}</li><!--已回答-->
                </ul>
            </div>
            <div class="module-box-11 body-content" :class="{'height-100' : total === 0}" style="height: calc(100% - 50px);">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getFreshDetail"
                    >
                        <div v-bind:class="{'height100' : total === 0}">
                            <ul>
                                <li v-if="index === 0" tag="li" class="white-bg bottom-shadow clearfix" v-for="pendingAnswerInfo in pendingAnswerList" :key="pendingAnswerInfo.resId" @click="toEva(pendingAnswerInfo.resId, pendingAnswerInfo.resModelType)">
                                    <span class="questionnaire-icon"></span>
                                    <p class="word-clamp-2 font-size16">{{ pendingAnswerInfo.resTitle }}</p>
                                    <p class="font-size11 flex-align" style="color: #cccccc;"><i class="time-icon-01"></i>{{pendingAnswerInfo.modEffEndDatetime}} {{ $t("cos_app_cutoff_time") }}</p><!--截止-->
                                </li>
                                <li class="white-bg bottom-shadow clearfix" v-if="index === 1"  v-for="pendingAnswerInfo in pendingAnswerList" :key="pendingAnswerInfo.resId" @click="toEva(pendingAnswerInfo.resId, pendingAnswerInfo.resModelType, true)">
                                    <span class="questionnaire-icon"></span>
                                    <p class="word-clamp-2 font-size16">{{ pendingAnswerInfo.resTitle }}</p>
                                    <p class="font-size11 flex-align" style="color: #cccccc;"><i class="time-icon-01"></i>{{pendingAnswerInfo.modEffEndDatetime }} {{ $t("button_submit") }}</p><!--提交-->
                                </li>
                            </ul>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <common-loading :isLoading="isLoading"></common-loading>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
    </div>
</template>

<script>
export default {
    name: 'Evaluation',
    data() {
        return {
            pageNo: 1,
            index: 0, //切换列表的index
            pendingAnswerList: [], //待回答列表
            total: 0,
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        toEva(resId, resModelType, view) {
            // resModelType 1： 公共问卷，2：培训需求调查，3： 评价问卷
            let query = {};
            if (view) {
                query = {status: 1};
            }
            if (resModelType === 1 || resModelType === 2) {
                this.$router.push({path: '/detail/' + resId + '/eva', query: query});
            } else {
                // path: '/certifiedDetail/' + aeModId + '/eva' + '?status=' + status + '&aeId=' + aeId + '&aeItmId=' + aeItmId
                this.$router.push({path: '/certifiedDetail/' + resId + '/questionnaire', query: query});
            }
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getFreshDetail('refresh');
                this.isRefresh = false;
            }, 900);
        },
        listSwitch(index) {
            this.isLoading = true;
            this.pendingAnswerList = [];
            this.index = index;
            this.onFetching = false;
            this.pageNo = 1;
            this.total = 0;
            this.getFreshDetail('refresh');
        },
        getFreshDetail(option) {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/questionnaire/list/${this.index}`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: 10,
                    mobileInd: 1
                }
            }).then(res => {
                this.isLoading = false;
                if (option && option === 'refresh') {
                    this.pendingAnswerList = res.data.results;
                } else {
                    this.pendingAnswerList = [...this.pendingAnswerList, ...res.data.results];
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.pendingAnswerList.length >= this.total) {
                    this.finished = true;
                }
            });
        }
    },
    mounted() {
        this.getFreshDetail('refresh');
    }
};
</script>

<style scoped>
    .module-box-11 {
        margin: 15px 15px 0;
    }
    .module-box-11 ul li {
        padding: 15px 15px 15px 69px;
        margin-bottom: 12px;
    }
    .module-box-11 ul li:nth-last-child(1) {
        margin-bottom: 0;
    }
    .questionnaire-icon {
        float: left;
        margin-left: -49px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #eeeeee;
    }
    .questionnaire-icon:before {
        content: "";
        display: block;
        width: 21px;
        height: 21px;
        background: url(../../../static/images/icon-04.png) no-repeat 1px -4px;
        background-size: 19px;
        margin: 9px auto 0;
    }
    .time-icon-01, .time-icon-02 {
        width: 15px;
        height: 15px;
        float: left;
        background: url(../../../static/images/icon-04.png) no-repeat 0 -21px;
        background-size: 13px;
    }
    .time-icon-02 {
        background-position: 0 -41px;
    }
    .flex-align{
        display: flex;
        align-items: center;
    }
</style>
